<template>
    <main>
        <li v-for="(item,i) in bookList" :key="i" id="M">
            <img :src="item.avatar" alt="404" id="img"  @click="readbook(item.state,item._id)">
            <div id="bookM">
                <li id="bookMT"><span @click="remove(item._id)">x</span></li>
                <li id="bookMM"  @click="readbook(item.state,item._id)">
                    <h4>{{item.bookname}}</h4>
                    <p v-if="item.isend == 0">连载中 - {{item.thelast}}</p>
                    <p v-if="item.isend == 1">完结-{{item.thelast}}</p>
                </li>
            </div>
        </li>
    </main>
</template>

<script>
export default {
    created(){
        this.getUserBookBase();
    },
    data(){
        return{
            bookList:[],
        }
    },
    methods:{
        async getUserBookBase(){
            const {data:res} = await this.$http.get(`/users/shoucang/${window.sessionStorage.getItem("userId")}`);
                this.bookList = res.data;
                console.log(res.data);
        },
        readbook(state,id){
            if(state == 1){
                this.$message.error("该书正在封禁中，不可阅读");
            }
            else{
                let routeUrl = this.$router.resolve(`/readbook/${id}/${0}`);
                window.open(routeUrl.href, "_blank");
            }
        },
        async remove(id){
            console.log();
            const {data:res} = await this.$http.post(`/users/removeShoucang/${window.sessionStorage.getItem("userId")}`,{
                bookid:id
            })
            if(res == "OK"){
                this.getUserBookBase();
            } else {
                this.$message.error("删除失败")
            }
            //console.log(id);
        }

    }
}
</script>

<style lang="less" scoped>
    li{
    list-style: none;
    display: flex;
    }
    li:hover{
        cursor: pointer;
    }
    main{
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
    }
    #M{
        height: 150px;
        width: 240px;
        display: flex;
        align-items: center;
        background-color:rgba(211, 211, 211, 0.836);
        margin: 3px;
    }
    #img{
        height: 120px;
        width: 90px;
        margin-left: 8px;
        margin-right: 6px;
    }
    #bookM{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    #bookMT{
        height: 15px;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        font-size: 18px;
    }
    #bookMT span{
        margin-right: 5px;
    }
    #bookMT span:hover{
        cursor: pointer;
        color: red;
    }
    #bookMM {
        height: 120px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    h4{
        margin-top: 10px;
        margin-left: 1px;
        margin-bottom: 10px;
    }
    p{
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 2px;
    }

</style>